import { Fragment } from '@/components/Fragment'; 
import { Rating, IconAdd, IconStarBorder } from '@aws-amplify/ui-react';

import {
  DefaultRatingExample,
  RatingColorExample,
  RatingEmptyExample,
  RatingGlobalColorExample,
  RatingGlobalSizeExample,
  RatingIconExample,
  RatingMaxExample,
  RatingSizeExample,
  RatingStyleColorExample,
  RatingStyleSizeExample,
  RatingSVGExample,
  RatingValueExample,
  RatingThemeExample,
} from './examples';
import { RatingDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<RatingDemo />

## Usage

Import Rating component

<Example>
  <DefaultRatingExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultRatingExample.tsx

    ```

  </ExampleCode>
</Example>

### Value

Pass in a `value` prop to set the Rating value.

<Example>
  <RatingValueExample />
  <ExampleCode>
    ```jsx file=./examples/RatingValueExample.tsx

    ```

  </ExampleCode>
</Example>

### Max Value

Pass in an optional `maxValue` prop to set the maximum value of the Rating component (default maxValue is 5).

<Example>
  <RatingMaxExample />
  <ExampleCode>
    ```jsx file=./examples/RatingMaxExample.tsx

    ```

  </ExampleCode>
</Example>

### Size

Use the `size` prop to adjust the size of the Rating component. Options include `small`, `large`, and none (default).

<Example>
  <RatingSizeExample />
  <ExampleCode>
    ```jsx file=./examples/RatingSizeExample.tsx

    ```

  </ExampleCode>
</Example>

### Colors

The fill color and empty color can be set using the `fillColor` and `emptyColor` props.

<Example>
  <RatingColorExample />
  <ExampleCode>
    ```jsx file=./examples/RatingColorExample.tsx

    ```

  </ExampleCode>
</Example>

### Custom Icon

A custom icon can be used in the Rating component using the `icon` prop. The Rating component works well with all major icon sets and these icons can be substituted in using this `icon` prop. The `icon` prop will override both the filled and empty icons unless a specific empty icon is also passed in.

<Example>
  <RatingIconExample />
  <ExampleCode>
    ```jsx file=./examples/RatingIconExample.tsx

    ```

  </ExampleCode>
</Example>

### Custom SVG Icon

A custom SVG may be used with the Rating component. The color props on the Rating component rely on the svg icon being used inheriting the color property and setting the svg fill to `currentColor`.

<Example>
  <RatingSVGExample />
  <ExampleCode>
    ```css
    /* styles.css */
    .my-cool-svg {
      fill: currentColor;
    }
    ```
    </ExampleCode>
    <ExampleCode>
    ```jsx file=./examples/RatingSVGExample.tsx

    ```

  </ExampleCode>
</Example>

### Custom Empty Icon

A custom empty icon can be used in the Rating component using the `emptyIcon` prop. The `emptyIcon` prop will only affect the empty icon being rendered and by passing in an empty icon there will be different icons being rendered for the empty icons and filled icons. This is in contrast to the icon prop which will override both the empty and filled icons being used.

<Example>
  <RatingEmptyExample />
  <ExampleCode>
    ```jsx file=./examples/RatingEmptyExample.tsx

    ```

  </ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="Rating">
  <Example>
    <RatingThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/RatingThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Rating" />

### Global styling

To override styling on all Rating components, you can set the Amplify CSS variables or use the built-in `.amplify-rating` classes.

#### Filled and empty icon colors

The empty and filled icon colors can be overridden using css variables or the `.amplify-rating-icon-filled` and `.amplify-rating-icon-empty` classes.

<Example>
  <RatingGlobalColorExample />
  <ExampleCode>
    ```css
    /* styles.css */
    :root {
      --amplify-components-rating-filled-color: var(--amplify-colors-purple-60);
      --amplify-components-rating-empty-color: var(--amplify-colors-blue-60);
    }
    /* OR */
    .amplify-rating-icon-filled {
      color: var(--amplify-colors-purple-60);
    }

    .amplify-rating-icon-empty {
      color: var(--amplify-colors-blue-60);
    }
    ```

  </ExampleCode>
</Example>

### Sizes

The size variations on the Rating component can be overridden at the application level using CSS variables

<Example>
  <RatingGlobalSizeExample />
  <ExampleCode>
  ```css
    /* styles.css */
    :root {
      --amplify-components-rating-small-size: var(--amplify-font-sizes-xxxl);
    }
    /* OR */
    .amplify-rating[data-size=small] {
      font-size: var(--amplify-font-sizes-xxxl);
      line-height: var(--amplify-font-sizes-xxxl);
    }
  ```

  </ExampleCode>
</Example>

### Local styling

The Rating component styling props can be overridden using a custom class name and the built-in CSS classes.

### Filled and empty icon colors

The empty and filled icon colors can be overridden using a custom CSS class on your Rating component and with the `.amplify-rating-icon-filled` and `.amplify-rating-icon-empty` classes

<Example>
  <RatingStyleColorExample />
  <ExampleCode>
    ```css
    .my-rating-component .amplify-rating-icon-filled {
      color: var(--amplify-colors-purple-60);
    }

    .my-rating-component .amplify-rating-icon-empty {
      color: var(--amplify-colors-blue-60);
    }
    ```

  </ExampleCode>
  <ExampleCode>
    ```jsx file=./examples/RatingStyleColorExample.tsx

    ```

  </ExampleCode>
</Example>

#### Sizes

The size variations on the Rating component can be overridden at the individual component level.
Here we override the `small` size to display `xxxl` stars.

<Example>
  <RatingStyleSizeExample />
  <ExampleCode>
    ```css
    /* styles.css */
    .large-rating[data-size='small'] {
      font-size: var(--amplify-font-sizes-xxxl);
      line-height: var(--amplify-font-sizes-xxxl);
    }
    ```
  </ExampleCode>
  <ExampleCode>
    ```jsx file=./examples/RatingStyleSizeExample.tsx

    ```

  </ExampleCode>
</Example>